<template>
  <!-- 搜索框 -->
  <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <!-- 轮播图 -->
  <!-- https://vant.pro/vant/#/zh-CN/swipe#swipe-events -->

  <!-- Property "images" was accessed during render but is not defined on instance.  image被使用在渲染的时候，但是没有定义 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image.bannerid">
      <img class="lunbo-item" :src="image.img" />
    </van-swipe-item>
  </van-swipe>

  <!-- 商品列表 -->
  <!-- 设置垂直间距 -->

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
  >
    <van-row :gutter="[20, 20]" class="list">
      <!-- 使用组件 -->
      <ProductItem
        v-for="item in listArr"
        :key="item.id"
        :item="item"
        @click="$router.push('/detail?id=' + item.proid)"
      >
      </ProductItem>
    </van-row>
  </van-list>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import axios from "axios";
// 引入组件-自动注册苏州
import ProductItem from "@/components/ProductItem.vue";
import http from "@/utils/request";
// defineOptions({
//   name: "HomeView",
// });

let router = useRouter();

const loading = ref(false);
const finished = ref(false);

let count = 1;
let limitNum = 15;
// 滚动底部--就会触发
const onLoad = async () => {
  count++; // 页码加加
  console.log("滚动底部--就会触发");
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  let productListAPI = "/api/pro/list";
  /*
  字段	类型	描述
  count	Number
  页码,默认值为1
  limitNum	Number
  每页显示个数,默认值为10
    */

  //await 会等后面的promsie请求成功以后，才会往下周
  let r = await http.get(productListAPI, {
    params: {
      count: count,
      limitNum,
    },
  });
  console.log(r.data); //服务器返回的数据，里面还有一个data属性，是商品列表数据
  // 修改了ref响应式数据，页面就会更新
  // listArr.value = r.data.data;

  // *****服务器返回的数据push到数组中
  // list.value.push(list.value.length + 1);
  listArr.value.push(...r.data.data);

  // 加载状态结束
  loading.value = false;

  // 数据全部加载完成
  // 如果一次返回的数据小于15 说明没有更多了
  if (r.data.data.length < limitNum) {
    finished.value = true;
  }
};

// 搜索框的值
let value = ref("");
//搜索函数
function onSearch() {
  console.log("搜索了", value.value);
  //路由跳转搜索结果页面--把输入框的值传入到搜索页面
  router.push("/search?word=" + value.value);
}

// 轮播图的数据源
const images = ref([
  // "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  // "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
]);
async function loadLunboData() {
  let LunboAPI = "/api/banner/list";
  let r = await http.get(LunboAPI);
  console.log(r.data);
  //
  images.value = r.data.data;
}
loadLunboData();

// 商品列表数据
const listArr = ref([
  // {
  //   id: 1,
  //   title: "商品1商品1商品1商品1商品1商品1商品1商品1商品1",
  //   img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  // },
  // { id: 2, title: "商品1", img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" },
  // { id: 3, title: "商品1", img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" },
  // { id: 4, title: "商品1", img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" },
  // { id: 5, title: "商品1", img: "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" },
]);

async function loadList() {
  let productListAPI = "/api/pro/list";
  /*
  字段	类型	描述
  count	Number
  页码,默认值为1
  limitNum	Number
  每页显示个数,默认值为10
    */
  let count = 1;
  let limitNum = 15;
  //await 会等后面的promsie请求成功以后，才会往下周
  let r = await http.get(productListAPI, {
    params: {
      count: count,
      limitNum,
    },
  });
  console.log(r.data); //服务器返回的数据，里面还有一个data属性，是商品列表数据
  //修改了ref响应式数据，页面就会更新
  listArr.value = r.data.data;
}
loadList();
</script>

<style scoped>
.btn {
  width: 187.5px;
}
.lunbo-item {
  width: 375px;
}

.list {
  width: 355px;
  margin: 0 auto;
}
</style>
